import styled from 'styled-components'

const NavigationStyled = styled.div`
  flex-grow: 0;
  flex-shrink:0;
  
  width : 100%;
  background-color :${props => props.backgroundColor?props.backgroundColor:'#56D9D1'};
  background-image: url('${props => props.backgroundImage}');
  background-repeat: no-repeat;
  background-position-y: top;
  background-position-x: left;
  background-size: 100% 100%;
  color: "#fff";
  font-size : ".34rem";
  div.statusBar{
    width : 100%;
    background-color: ${props => props.statusBarColor};
    height : ${props => props.statusBarHeight};
    
  }
  div.nav{
    width : 100%;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    height : ${props => props.navHeight?props.navHeight:'44px'};
    div{
      position: absolute;
      /* top: 0; */
      /* height : 100%; */
      /* line-height : ${props => props.navHeight?props.navHeight:'44px'}; */
      overflow:hidden;

    }
    div.left{
      width: ${props => props.leftWidth?props.leftWidth:''};
      height: ${props => props.leftHeight?props.leftHeight:''};
      padding: ${props => props.leftPadding?props.leftPadding:''};
      margin: ${props => props.leftMargin?props.leftMargin:''};
      line-height:${props => props.leftHeight?props.leftHeight:props.navHeight||''};
      left:0;
      background-color: ${props => props.leftBackgroundColor};
      color: ${props => props.leftTitleColor};
      font-size : ${props => props.leftTitleSize};
      border-radius : ${props => props.leftRadius};
      img{
        height:${props => props.leftImgHeight?props.leftImgHeight:props.navHeight||''};
        width: ${props => props.leftImgWidth?props.leftImgWidth:''};
      }

    }
    div.title{
      left: 25%;
      width : 50%;
      text-align : center;
      color: ${props => props.titleColor?props.titleColor:'#fff'};
      font-size: ${props => props.titleSize?props.titleSize:'20px'};;
    }
    div.right{
      /* width:25%; */
      width: ${props => props.rightWidth?props.rightWidth:''};
      height: ${props => props.rightHeight?props.rightHeight:''};
      padding: ${props => props.rightPadding?props.rightPadding:''};
      margin: ${props => props.rightMargin?props.rightMargin:''};
      right: 0;
      text-align: center;
      /* padding-right: .1rem; */
      background-color: ${props => props.rightBackgroundColor};
      color: ${props => props.rightTitleColor};
      font-size : ${props => props.rightTitleSize};
      border-radius : ${props => props.rightRadius};
      img{
        height:${props => props.rightImgHeight?props.rightImgHeight:'30px'};
        width: ${props => props.rightImgWidth?props.rightImgWidth:''};
      }
    }
  }
`

export { NavigationStyled }


